<template>
  <div id="app">
    <yanziPlayer :initVolume="initVolume" :openBtnDrag="openBtnDrag" :showOpenBtn="showOpenBtn"
                 :isShowMusic.sync="isShowMusic" :btnStyle="btnStyle" :prePath="prePath" :musicList.sync="musicList"
                 :zIndex="zIndex" @uploadLRC="uploadLRC" @uploadMusic="uploadMusic" @uploadMusicIcon="uploadMusicIcon">
    </yanziPlayer>
  </div>
</template>

<script>
import yanziPlayer from "./components/yanzi_player.vue";

export default {
  name: "App",
  components: {
    yanziPlayer
  },
  data() {
    return {
      zIndex: "1111", // 层级
      musicList: [
        // {
        //   author: "开往春天的地铁",
        //   image: "https://cirteklink-images.oss-cn-shenzhen.aliyuncs.com/6cab9a56f4d0e4b2656083a631046c26_1_20211109185231.jpg",
        //   lrc: '',
        //   name: "开往春天的地铁",
        //   src: "https://cirteklink-images.oss-cn-shenzhen.aliyuncs.com/6cab9a56f4d0e4b2656083a631046c26_1_20211112170422.m4a"
        // },
        // {
        //   author: "星辰大海",
        //   image: "https://cirteklink-images.oss-cn-shenzhen.aliyuncs.com/6cab9a56f4d0e4b2656083a631046c26_1_20211109185231.jpg",
        //   lrc: '',
        //   name: "星辰大海",
        //   src: "https://cirteklink-images.oss-cn-shenzhen.aliyuncs.com/0cd960dda33333876ffffcd1223f83d1_1_20211104170834.m4a"
        // },
      ], // 歌曲列表
      prePath: "", // 域名前缀
      isShowMusic: false, // 是否隐藏播放器
      initVolume: 50, // 初始化音量
      showOpenBtn: true, // 打开播放器的按钮
      openBtnDrag: true, //打开播放器的按钮是否可拖拽
      btnStyle: { //打开播放器的按钮的样式
        color: "white", // 字体颜色
        backgroundColor: "#ccc", // 背景颜色
        width: "50px", // 宽度
        height: "50px", // 高度
        left: "30px", // 左边距离
        bottom: "80px", // 下边距离
        shadowColor: "#666", // 阴影颜色
      }
    };
  },
  methods: {
    uploadLRC(music) {
      console.log("uploadLRC", music);
    },
    uploadMusic(music) {
      console.log(music);
    },
    uploadMusicIcon(music) {
      console.log(music);
    }
  }
};
</script>

<style>

</style>
